<template>
  <div class="alarm-timeline">
    <el-steps style="min-width: 100%;" direction="vertical" :active="active" finish-status="success" align-center>
      <template v-for="item in params" :key="item.id">
        <el-step :title="item.description" status="finish">
          <template #description>
            <div>{{ item.stepsTime }}</div>
            <div>{{ item.stepsTime2 }}</div>
          </template>
        </el-step>
      </template>
    </el-steps>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps({
  params: {
    type: Array,
    default: () => [],
  },
})

const active = ref(3)
</script>
<style scoped lang="scss">
.alarm-timeline {
  width: 100%;
  height: 100%;
  padding-top: calc(16px * var(--scale));
}
</style>
